<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>花礼网后台管理系统-分类管理</title>
    <base href="http://${pageContext.request.serverName }:${pageContext.request.serverPort }${pageContext.request.contextPath }/" />

    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery-3.6.0.js"></script>
    <script src="js/laydate/laydate.js"></script>
    <link rel="stylesheet" href="css/Top.css">
    <link rel="stylesheet" href="css/Left.css">
    <link rel="stylesheet" href="css/commodityList.css">

<%--    交换位置的外部资源--%>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    <style>
        #sortable { list-style-type: none; margin: 0; padding: 0; width: 900px; }
        #sortable li {
            margin: 0 3px 3px 3px;
            padding: 0.4em;
            padding-left: 1.5em;
            font-size: 1.4em;
            height: 230px;
            position: relative;
        }
        #sortable li span { position: absolute; margin-left: -1.3em; }
        #addimg{
            border: 1px solid red;
            position: absolute;
            width: 79px;
            top: 41px;
            right: 140px;
            height: 32px;
            opacity: 0;
        }
        #sortable li .input{
            position: absolute;
            right: -244px;
            top: 60%;
            width: 240px;
        }
        #sortable li #chek{
            position: absolute;
            right: -274px;
            top: 65%;
        }


        #sortable li .ahref{
            position: absolute;
            right: -244px;
            top: 42%;
            width: 240px;
        }


        #sortable li .delete{
            position: absolute;
            right: -298px;
            top: 42%;
        }

    </style>
    <script>
        $(function() {
            $( "#sortable" ).sortable();
            $( "#sortable" ).disableSelection();
        });
    </script>
</head>
<body>
<div class="container-fluid">

    <div class="row">
        <div class="col-md-2 stick"><%@include file="Left.jsp"%></div>
        <div class="col-md-10 col-md-offset-2"><%@include file="Top.jsp"%></div>
        <div class="col-md-10 col-md-offset-2">
            <hr>

            <form action="manager/CarouselServlet.shtml" method="post" enctype="multipart/form-data" id="sub2">
                <a href="javascript:void(0);" class="col-md-offset-10">
                    <button class="btn btn-primary">添加图片<input type="file" name="img" id="addimg"></button>
                </a>
                <input type="submit" style="display: none">
            </form>

            <hr>
            <ul id="sortable">
                <c:forEach items="${requestScope.carouselList}" var="c">
                    <li class="ui-state-default" dataAhref=${c.ahref}>
                        <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
                        <img src="${c.image}" alt="" height="100%">
                        <input type="hidden" name="seriaNum" value="${c.serialnum}">
                        <input type="hidden" name="id" value="${c.id}">
<%--                        <input type="text" value="${c.ahref}" class="input form-control" disabled>--%>

<%--                        <input type="checkbox" id="chek">--%>

                        <select class="ahref form-control">
                            <c:forEach items="${requestScope.commodityDetailsList}" var="c1">
                                <option value="${c1.id}">${c1.comName}</option>
                            </c:forEach>
                        </select>
                        <a href="manager/deleteCarouselServlet.shtml?id=${c.id}" onclick="return confirm('确认删除该轮播图吗？')" class="delete">
                            <button class="btn btn-danger">删除</button>
                        </a>
                    </li>
                </c:forEach>
            </ul>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <hr>
        </div>
    </div>
</div>
</body>
<script>
    $(function (){

        //根据自身的ahref设置下拉框子
        let lis = $("#sortable li");
        $(lis).each(function (i,e){
            $(e).children(".ahref").val($(this).attr("dataAhref"));
        });

        //左侧‘分类管理’变红
        $("#ul li:nth-child(6) a").css("color","red");
        $("#let").html("轮播图管理");

        //更改链接(下拉框改变事件
        $(".ahref").change(function (){
            let id = $(this).prev().val();
            let val = $(this).val();
            $.post("manager/updateCarouselServlet.shtml",{id,val});
        });

        //鼠标拖动轮播图改变事件（鼠标弹起事件）
        $("[class='ui-state-default']").mouseup(function (){
            //等待dom渲染的定时器
            setTimeout(function (){
                let idsstr = "";
                $("[class='ui-state-default']").each(function (i,e){
                    let id = $(e).children("[name='id']").val();
                    idsstr+=id+",";
                });
                //发送Ajax请求到servlet
                $.post("manager/CarouselAjaxServlet.shtml",{idsstr});
            },1);
        });

        //添加图片改变事件
        $("#addimg").change(function (){
            //去触发submit按钮
            if($("#sortable li").length==10){
                alert('最多支持10张轮播图！');
                return;
            }else{
                $("#sub2").submit();
            }
        });

    })
</script>

</html>
